<div class="main-container">
  <div class="left">
    <div class="tree-wrap">
      <nz-tree
        nzExpandAll="true"
        [nzData]="treeData"
        [nzTreeTemplate]="treeNode"
        [nzSearchValue]="searchValue"
        [nzSelectedKeys]="defaultKeys"
        (nzClick)="checkDetail($event)"
      >
      </nz-tree>
      <ng-template #treeNode let-node>
        <div class="custom-node" [class.active]="activedNode?.key === node.key">
          <span class="span-node">{{node.title}}</span>
        </div>
      </ng-template>
    </div>
  </div>

  <div class="right">
    <div class="right-title" >{{name}}取水项目名录（共{{total}}个）</div>

    <div class="right-content">
      <div class="form-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
          <nz-form-item>
            <nz-form-label>关键词</nz-form-label>

            <nz-form-control>
              <input formControlName="fileName" nz-input placeholder="关键词"/>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button nzType="primary" (click)="getGridData()"><i nz-icon nzType="search"></i>搜索</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="table-wrap">
        <!--<label style="padding:0 0 5px 0;" nz-checkbox [(ngModel)]="checked">仅显示本级直管项目</label>-->
        <nz-table
          #middleTable
          nzSize="middle"
          [nzData]="rightTableData"
          [nzTotal]="total"
          [nzFrontPagination]="false"
          [(nzPageIndex)]="pageNum"
          [(nzPageSize)]="pageSize"
          [nzLoading]="loading"
          (nzPageIndexChange)="getGridData()"
        >
          <thead>
          <tr>
            <th nzWidth="100px">项目编号</th>
            <th nzWidth="200px">项目名称</th>
            <th nzWidth="200px">取水单位</th>
            <th nzWidth="200px">取水许可证</th>
            <th nzWidth="100px">水资源一级区</th>
            <th nzWidth="70px" >取水工程数量</th>
            <th nzWidth="70px">取水工程类型</th>
            <th nzWidth="200px">取水工程所在地</th>
            <th nzWidth="100px">复核结果</th>
            <th nzWidth="200px">复核单位</th>
            <th nzWidth="70px">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of middleTable.data">
            <td>{{ data.xmbh }}</td>
            <td>{{ data.xmmc }}</td>
            <td>{{ data.qsdwmc }}</td>
            <td>{{ data.qsxkzh }}</td>
            <td>{{ data.ssly }}</td>
            <td nzAlign="center">{{ data.qsgczs }}</td>
            <td nzAlign="center">{{ data.qsgcsslx }}</td>
            <td>{{ data.szxzqdm }}</td>
            <td>{{ data.fhzt }}</td>
            <td>{{ data.fhdw }}</td>
            <td>
              <a (click)="onView(data)">详情</a>
            </td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</div>
